<template>
  <div>
<!--    <h1>商品详情</h1>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{ categoryInfo.name }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">

        <div class="block">
          <el-carousel trigger="click" height="350px">
            <el-carousel-item v-for="item in carouselImages" :key="item">
<!--              <h3 class="small">{{ item }}</h3>-->
              <el-image :src="item" style="height: 100%; width: 100%;"/>
            </el-carousel-item>
          </el-carousel>
          <div style="margin-top: 10px">
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic
                    :value="123"
                    :title="title"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic title="男女比">
                    <template slot="formatter">
                      456 平价
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="0"
                    decimal-separator="."
                    :value="123"
                    :title="收藏人气"
                  >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic  title="品牌名称">
                    <template slot="suffix">
                      {{projectDetail.brandInfo.nam}}
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

<!--    -------------

           <el-form-item  v-for="ruleAttr in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
            <el-radio-group v-for="value in ruleAttr.valueList" v-model="form.rule1">
              <el-radio :label="value" border>{{value}}</el-radio>
            </el-radio-group>
          </el-form-item>
    ----------->
      </el-col>
      <el-col :span="12">
        <h1>商品信息</h1>
        <h3 style="color: red">商品规格信息 {{checkSkuInfo.sku}}</h3>
        <h2 style="color: red">价格￥{{checkSkuInfo.price}}</h2>
        <h2 style="color: #00a3ff">库存{{checkSkuInfo.stock}}</h2>
<!--        label-width="8px" style="margin-top: 110px"-->

<!--        <el-row>-->
<!--          <el-col v-for="(ruleAttr,index) in projectDetail.ruleAttrModelList">-->
<!--            <el-radio v-model="form['rule'+index]" @change="selectRuleSku"-->
<!--                      v-for="value in ruleAttr.valueList"-->
<!--                      :label="value" :key="value" :value="value" border>{{value}}</el-radio>-->
<!--          </el-col>-->
<!--        </el-row>-->

        <el-form  :model="form" >
          <el-form-item v-for="(ruleAttr,index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name" >
<!--            <el-radio-group v-for="value in ruleAttr.valueList"  v-model="form[index]" @change="selectRuleSku">-->
<!--              <el-radio :label="value" border>{{value}}</el-radio>-->
<!--            </el-radio-group>-->
            <el-radio v-model="form[index]" @change="selectRuleSku"
                      v-for="value in ruleAttr.valueList"
                      :label="value" :key="value" :value="value" border>{{value}}</el-radio>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="form.num"  :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addCart">加入购物车</el-button>
<!--        <el-button>立即购买</el-button>-->

      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品详情</span>
          </div>

<!--          属性组名称-->
          <el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :colon="1">
            <el-descriptions-item v-for="attribute in attributeGroup.attributeList"
                                  :label="attribute.name">{{attributeMap[attribute.id]}} </el-descriptions-item>
          </el-descriptions>
<!--          自有属性-->
          <el-descriptions v-if="projectDetail.attributeList.length !==0" title="其它" :column="1">
            <el-descriptions-item v-for="attributeInfo in projectDetail.attributeInfoList"
                                  :label="attributeInfo.name">{{attributeMap[attributeInfo.id]}}}</el-descriptions-item>
          </el-descriptions>
<!--          <p><img src=\"http://127.0.0.1:9300/statics/2024/03/25/华为logo_20240325220513A012.png\"></p>-->
          <editor v-model="projectDetail.projectInfo.introduction"  :read-only="true">

          </editor>

        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getDetailInfo} from "@/api/product/info";
import {addInfo} from "@/api/shopCart/info";
import {Message} from "element-ui";

export default {
    name:"productDetail",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        // breadcrumbList:[
        //   // '首页',
        //   '外衣 ',
        //   '女式超柔软拉毛运动开衫',
        // ],
        // like: true,
        // value1: 4154.564,
        // value2: 1314,
        title: "增长人数",
        form:{
          num:1,
          rule0:null,
          rule1:null,
          rule2:null,
        },
        projectDetail:{
          projectInfo:{
            name:""
          },
          brandInfo:{
            nam:""
          },
          // 属性
          attributeList: []
        },
        checkSkuInfo:{
          price:0.00
        },

        // 轮播图
        carouselImages:[],
        // 定义map
        attributeMap: {},

      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      // 新增购物车
      addCart(){
        addInfo(this.form).then(response=>{
          // 购物车 4.7下午
          Message({message: "添加购物车成功",type:"success"})
          console.log(response)
        })
      },
      // selectRule(){
      //   let ruleSize = this.projectDetail.ruleAttrModelList.size;
      //   let  sku = "";
      //   for (let index = 0; ; index ++){
      //     sku += this.form['rule'+index];
      //     if (index + 1 ==ruleSize){
      //       break
      //     }
      //     sku += "-"
      //   }
      //   console.log(sku)
      //
      //   this.projectDetail.ruleAttrModelList.forEach((ruleAttrModel,index) =>{
      //     this.form['rule'+index];
      //   })
      // },
      initSku(){
        let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
        let skuArr = sku.split("-");
        skuArr.forEach((rule,index) =>{
          this.form[index] =rule;
          console.log(rule,index)
        })
        this.selectRuleSku();
      },
      selectRuleSku(){
        let ruleSize = this.projectDetail.ruleAttrModelList.length;
        let  sku = "";
        for (let index = 0; ; index ++){
          sku += this.form[index];
          if (index + 1 == ruleSize){
            break;
          }
          // if (this.form['rule'+index] == )
          sku +="-";
        }
        // 购物车---.
        this.form.projectSku =sku;
        let skuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku ==sku);
        console.log(skuInfo)
        // 价格
        this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo =>skuInfo.sku ==sku)
        // sku
        // let skuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo =>skuInfo.sku ==sku);
        // console.log(skuInfo)

        // this.projectDetail.ruleAttrModelList.size
        // this.projectDetail.ruleAttrModelList.forEach((ruAttrModel,index) =>{
        //   this.form['rule'+index]
        // });
      },
      // 初始化
      initProductDetailInfo(detailId){
        // 先写一个固定的id
        getDetailInfo(detailId).then(response=>{
          this.projectDetail =response.data;
          this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
            let  key = productAttributeInfo.attributeId
            this.attributeMap[key] = productAttributeInfo["value"]
          })

          // 购物车
          this.form.projectId =this.projectDetail.projectInfo.id;


          this.initSku();
          let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
          for (let index = 0; index <ruleAttrLength; index ++){
            this.form["rule"+index] =null;
          }
          this.carouselImages =this.projectDetail.projectInfo.carouselImages.split(",");
          this.initSku();


          // this.projectDetail.ruleAttrModelList.forEach((ruleAttrModel,index) =>{
          //   this.form['rule'+index] =ruleAttrModel.valueList[0]
          // })

          // this.selectRuleSku();
          // console.log(response)
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      // 详情页
      const detailId = this.$route.params && this.$route.params.dictId;

      this.initProductDetailInfo(detailId);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>



